<template>
    <el-card shadow="never" header="修改密码">
        <el-alert title="密码更新成功后，您将被重定向到登录页面，您可以使用新密码重新登录。初始密码和初始邮箱一致。"
                  type="warning" show-icon
                  style="margin-bottom: 15px;"/>
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" style="margin-top:20px;">
            <el-form-item label="当前密码" prop="current">
                <el-input v-model="form.current" type="password" show-password placeholder="请输入当前密码"></el-input>
                <div class="el-form-item-msg">必须提供当前登录用户密码才能进行更改</div>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
                <el-input v-model="form.password" type="password" show-password placeholder="请输入新密码"></el-input>
                <fc-password-strength v-model="form.password"></fc-password-strength>
                <div class="el-form-item-msg">请输入包含英文、数字的6位及以上密码</div>
            </el-form-item>
            <el-form-item label="确认新密码" prop="confirm">
                <el-input v-model="form.confirm" type="password" show-password
                          placeholder="请再次输入新密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit(formRef)">保存密码</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup lang="ts">
import {ref, reactive, nextTick} from 'vue';
import {ElMessageBox, type FormInstance, FormRules} from 'element-plus'
import {updatePasswordApi} from "@/api/modules/auth.ts";
import {useAuthStore} from "@/store/modules/auth.ts";
import {useMenuStore} from "@/store/modules/menu.ts";
import {useSearchStore} from "@/store/modules/search.ts";
import {useEnvelopeStore} from "@/store/modules/envelope.ts";
import {useSysGlobalStore} from "@/store/system/global.ts";
import {useSysKeepAliveStore} from "@/store/system/keepAlive.ts";
import {useSysViewTagsStore} from "@/store/system/viewTags.ts";
import router from "@/router";

interface FormData {
    current: string;
    password: string;
    confirm: string;
}

const form = reactive<FormData>({
    current: "",
    password: "",
    confirm: "",
})

const rules = reactive<FormRules<FormData>>({
    current: [
        {required: true, message: '请输入当前密码'}
    ],
    password: [
        {required: true, message: '请输入新密码'},
        {min: 6, message: '密码长度不能少于6位', trigger: 'change'}
    ],
    confirm: [
        {required: true, message: '请再次输入新密码'},
        {min: 6, message: '密码长度不能少于6位', trigger: 'change'},
        {
            validator: (_rule, value, callback) => {
                if (value !== form.password) {
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback();
                }
            }
        }
    ]
})

const formRef = ref<FormInstance>()
const submitting = ref(false);
const onSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    if (submitting.value) return;
    try {
        submitting.value = true;
        await formEl.validate();
        const updateData = await updatePasswordApi(form);
        ElMessageBox.confirm(updateData.message, '提示', {
            type: 'success',
            confirmButtonClass: 'el-button--primary',
            showCancelButton: false,
        }).then(() => {
            useAuthStore().$reset();
            useMenuStore().$reset();
            useSearchStore().$reset();
            useEnvelopeStore().$reset();
            useSysGlobalStore().$reset();
            useSysKeepAliveStore().$reset();
            useSysViewTagsStore().$reset();
            nextTick(() => {
                router.replace({path: '/login'});
            });
        });
    } catch (error) {
        console.log(error);
    } finally {
        submitting.value = false;
    }
};
</script>